<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店房源管理后台</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        /* 自定义样式可以放在这里 */
    </style>
</head>

<body>
    <div class="container mt-5">
        <h1>酒店房源管理后台</h1>

        <!-- 房间列表 -->
        <h2>房间列表</h2>
        <table class="table">
            <thead>
                <tr>
                    <th>房间号</th>
                    <th>房间类型</th>
                    <th>房间状态</th>
                    <th>房间描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="roomList">
                <!-- 房间列表内容通过后台数据动态生成 -->
            </tbody>
        </table>
        <!-- 添加房源表单 -->
        <!-- 添加房源表单 -->
        <h2>添加房源</h2>
        <form id="addRoomForm">
            <div class="form-group">
                <label for="roomNumber">房间号</label>
                <input type="text" class="form-control" id="roomNumber" required>
            </div>
            <!-- 其他表单字段 -->
            <button type="submit" class="btn btn-primary">提交</button>
        </form>

        <!-- 编辑和删除房源功能在房间列表中实现 -->

        <!-- 房间状态管理 -->
        <!-- 可以使用下拉框或按钮等形式来进行房间状态的更新 -->

        <!-- 房间预订管理及图片管理需要进一步的表单和列表进行展示 -->

        <!-- 价格管理 -->
        <!-- 价格设置的表格或表单 -->

        <!-- 查询和筛选可以通过表单或下拉框等来实现 -->

        <!-- 统计和报表展示在页面底部或单独的页面中 -->

    </div>

    <script src="../js/jquery-3.3.1.slim.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script>
        // 模拟后台返回的房间数据
        var rooms = [
            { roomNumber: '101', roomType: '标准间', roomStatus: '空闲', roomDescription: '描述1' },
            { roomNumber: '102', roomType: '豪华间', roomStatus: '预订中', roomDescription: '描述2' }
            // 更多房间数据...
        ];

        // 模拟动态生成房间列表
        function renderRoomList() {
            var html = '';
            for (var i = 0; i < rooms.length; i++) {
                html += '<tr>';
                html += '<td>' + rooms[i].roomNumber + '</td>';
                html += '<td>' + rooms[i].roomType + '</td>';
                html += '<td>' + rooms[i].roomStatus + '</td>';
                html += '<td>' + rooms[i].roomDescription + '</td>';
                html += '<td><button class="btn btn-primary btn-sm" data-room-number="' + rooms[i].roomNumber + '">编辑</button></td>';
                html += '</tr>';
            }
            $('#roomList').html(html);
        }

        // 添加房源表单提交事件
        $('#addRoomForm').submit(function (e) {
            e.preventDefault();
            var roomNumber = $('#roomNumber').val();
            // 获取其他表单数据...

            // 模拟向后台提交数据并更新房间列表
            rooms.push({ roomNumber: roomNumber, roomType: '', roomStatus: '空闲', roomDescription: '' });
            renderRoomList();
            // 清空表单...
        });

        // 模拟编辑房间功能
        $(document).on('click', '.btn-edit-room', function () {
            var roomNumber = $(this).data('room-number');
            // 根据roomNumber获取房间详细信息并进行编辑...
        });

        // 页面加载时初始化房间列表
        $(document).ready(function () {
            renderRoomList();
        });
    </script>
</body>

</html>